$_img_path: $img_path + 'p1/';
.p1 {
  $origin_width: 640px;
  $origin_height: 1009px;
  background: url($_img_path + 'bg1.jpg') no-repeat;
  background-size: cover;
  width: $origin_width/2;
  height: $origin_height/2;
  @at-root {
    .position_p1_helper {
      position: relative;
      height: 100%;
      $rank_atime: .5s;
      $country_atime:1s;
      $text_atime:.5s;
      @at-root {
        .rank_p1_img {
          $origin_width: 190px;
          $origin_height: 67px;
          background: url($_img_path + 'average_qualify.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin: 0 auto;
          position: relative;
          top: 10%;
          opacity:0;
          @include vp(transform,scale(.1));
          @at-root  .p1.showing #{&} {
            @include vp(transition, all $rank_atime $slide_atime ease-in-out);
            @include vp(transform,scale(1));
            opacity:1;
          }
        }

        .country_p1_img {
          $origin_width: 640px;
          $origin_width: 408px;
          width: 100%;
          margin: 0 auto;
          position:relative;
          top:55px;
          opacity:0;
          @include vp(transform,translateX(-100%)translateY(30%));
          @at-root  .p1.showing #{&} {
            @include vp(transition, all $country_atime $rank_atime+$slide_atime ease-in-out);
            @include vp(transform,translateX(0)translateY(0));
            opacity:1;
          }
        }

        .text_p1_img {
          $origin_width: 540px;
          $origin_height: 91px;
          background: url($_img_path + 'text.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          position: absolute;
          left: 50%;
          bottom: 70px;
          opacity:0;
          @include vp(transform, translateX(-50%));
           @at-root  .p1.showing #{&} {
             @include vp(transition, all $text_atime $rank_atime+$country_atime+$slide_atime ease-in-out);
            opacity:1;
          }
        }
      }
    }
  }
}